<html>
	<head>
		 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		 <!-- jquery -->
        <script src="/lianxijs/libs/jquery/jquery-1.11.1.min.js"></script>
		<!-- http插件 -->
        <script src="/lianxijs/libs/http/axios.min.js"></script>
        
		<!-- loading -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/loading/loading/jquery.mloading.css"/>
        <script src="/lianxijs/libs/loading/loading/jquery.mloading.js"></script>
        <!-- <script src="/lianxijs/libs/loading/loading/loading.js"></script> -->
	</head>
	<body>
		  <h3>加载遮罩层示例 https://github.com/imingyu/jquery.mloading</h3>
        <div id="loading">
            <p>
            <button onClick="showloadingBody()">点我整个页面都遮住了</button>
            </p>
            <p>
            <button onClick="showloading('#loading')">点我指定位置遮住了</button>
            </p>            
        </div>
        <div>
            <button onClick="hideloading('#loading')">点我取消遮罩</button>
        </div>
	</body>
</html>
<script>
     // 遮罩层
    let showloadingBody = function () {
        $("body").mLoading({
            text:"5秒后自动取消遮罩",//加载文字，默认值：加载中...
            icon:"",//加载图标，默认值：一个小型的base64的gif图片
            html:false,//设置加载内容是否是html格式，默认值是false
            content:"",//忽略icon和text的值，直接在加载框中显示此值
            mask:true//是否显示遮罩效果，默认显示
        });
        window.setTimeout(hideloading, 5000, "body");
    }
    let showloading = function (element) {
        $(element).mLoading({
            text:"文件上传中",//加载文字，默认值：加载中...
            icon:"",//加载图标，默认值：一个小型的base64的gif图片
            html:false,//设置加载内容是否是html格式，默认值是false
            content:"",//忽略icon和text的值，直接在加载框中显示此值
            mask:true//是否显示遮罩效果，默认显示
        });
    }
    let hideloading = function (element) {
        $(element).mLoading("hide");//隐藏loading组件
    }

</script>